<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:extension class="extension">
    </template>
    <template v-slot:RollingLow>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
      <ZTab :tabList="button"  @click-tab="setActive"></ZTab>
      <z-search
        placeholder="请输入您要搜索的订单号/桌号/手机号"
        @query="onQuery"
        v-model="postForm.key"
        @update:model-value="onUpdateVal"
      ></z-search>
      <div class="performance-container-select">
        <div class="select-item" @click="bookerShow = true" style="margin-right: 11px;" >
          {{ waiterText }}
          <div class="select-item-icon"></div>
        </div>
        <div class="select-item"  @click="stateShow = true" v-if="postForm.state != 3">
          {{ stateText }}
          <div class="select-item-icon"></div>
        </div>
       
      </div>
    </template>
    <div class="orderlist-container">
      <div class="orderlist-container-main">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
        <div
          class="orderlist-main-item"
          v-for="(item, index) in info"
          :key="index"
        >
          <div class="main-item-top">
            <div>{{ item.state }}</div>
          </div>
          <div class="main-item-id">订单号：{{ item.orderBatchCode }}</div>
          <div class="main-item-table">{{ item.roomName }}</div>
          <div class="main-item-price">
            <div>下单人：</div>
            <div class="item-price-value" style="color: #ffaa00;">{{ item.payUserName }}</div>
          </div>
          <div class="main-item-price">
            <div>订单金额：</div>
            <div class="item-price-value" >{{ formatNumber(item.totalAmt) }}</div>
          </div>
          <div class="main-item-footer">
            <div class="item-footer-left">
              <div class="main-item-openTime">
                <div class="item-openTime-title">下单时间：</div>
                <div class="item-openTime-value">
                  {{ dayjs(item.orderTime).format('YYYY-MM-DD') }}
                  {{ dayjs(item.orderTime).format('HH:mm:ss') }}
                </div>
              </div>
              <!-- <div class="main-item-payTime">
                <div class="item-payTime-title">支付时间：</div>
                <div class="item-payTime-value">
                  {{ dayjs(item.payTime).format('YYYY-MM-DD') }}
                  {{ dayjs(item.payTime).format('HH:mm:ss') }}
                </div>
              </div> -->
            </div>
            <div class="item-footer-right" v-if="item.state != '已取消' && item.state != '已退款'">
              <div class="main-item-detail" v-has-role="'waiter-orderQuery'" @click.stop="jump(item.orderBatchCode,item.roomCode,item.consumeCode,item.roomName)">详情</div>
            </div>
          </div>
        </div>
      </van-list>
      </div>
    </div>
  </page-wrap>
  <z-picker
    v-model:show="bookerShow"
    :columns="waiterColumns"
    title="下单人"
    @confirm="onConfirm($event, 'booker')"
  />
  <z-picker
    v-model:show="stateShow"
    :columns="stateColumns"
    title="状态"
    @confirm="onConfirm($event, 'state')"
  />

</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformArrayProps } from '@/lib/util.js'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

const router = useRouter()
// 跳转到详情页
const jump = (value,roomCode,consumeCode,roomName) => {
  router.push({
    path: `/statistics/orderdetails`,
    query: { orderBatchCode: value,roomCode:roomCode,consumeCode:consumeCode,roomName:roomName }
  })
}
// ----------------------------------------------切换-------------------------------------------------
const button = ref([{ name: '所有订单' }, { name: '退款订单' }])
const setActive = value => {
  if(value.name === 1){
    postForm.state = 3
  }else{
    postForm.state = ''
  }
  loadData(true)
}
// 总数据
const info = ref([])
const bookerShow = ref(false)
const stateShow = ref(false)
const waiterText = ref('下单人')
const stateText = ref('状态')
// 选项组
const waiterColumns = ref([])
const stateColumns = ref([
  { text: '已支付', value: '2' },
  { text: '未支付', value: '1' },
  { text: '已取消', value: '0' },
  { text: '全部', value: '' }
])
// 弹窗确定按钮 状态state 2已支付 4赠送支付 3退款 0已取消
const onConfirm = function (ev, type) {
  console.log(ev.selectedOptions);
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  console.log(opt);
  switch (type) {
    case 'booker':
      waiterText.value = opt.text
      postForm.payUser = opt.text
      bookerShow.value = false
      if(!opt.value){
        waiterText.value='下单人'
        postForm.payUser = ''
      }
      break
    case 'state':
      stateText.value = opt.text
      postForm.state = opt.value
      stateShow.value = false
      if(!opt.value){
        stateText.value='状态'
      }
      break
  
  }
  loadData(true)
}
// 表单
const postForm = reactive({
  key: '', // 搜索关键词
  startDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15,
  payUser:'',
  state:'' // 状态state 2已支付 3退款 0已取消 1未支付
})
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.startDate = startTime
  postForm.endDate = endTime
  loadData(true)
}
//----------------------------------------------搜索---------------------------------------------------
const onQuery = () => {
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    loadData(true)
  }, 500)
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    info.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'OrderSearch',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(info.value, nowList)
  console.log(info.value);
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = async function() {
  const transA = [['userName','text'],['userCode','value']]
  // 获取服务员列表
  const getWaiter = await Api.Common.AppObjProcess.Do({ "functionName": "getWaiterList", "contentData": "" })
    waiterColumns.value = transformArrayProps(getWaiter.result, transA)
    Array.prototype.push.apply(waiterColumns.value,[{text: '全部', value: ''}])

  loadData(true)
}
onInit()
</script>

<style scoped lang="scss">
.performance-container-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222226;
  padding: 10px 12px;
  margin: 0px 0 10px;
  .select-item {
    // width: 111px;
    flex: 1;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;
    line-height: 14px;
    padding: 8px 0px 8px 11px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    .select-item-icon {
      position: absolute;
      right: 12px;
      top: 13px;
      width: 11px;
      height: 6px;
      background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
}
.orderlist-container {
  .orderlist-container-main {
    padding: 0 12px;
    .orderlist-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 0 0 20px 20px;
      .main-item-top {
        display: flex;
        justify-content: flex-end;
        div {
          background: #383840;
          border-radius: 0px 8px 0px 8px;
          padding: 4px 11px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;
        }
      }
      .main-item-id {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 13px;
        padding-bottom: 16px;
      }
      .main-item-table {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        padding-bottom: 20px;
      }
      .main-item-price {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 14px;
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        .item-price-value {
       
        }
      }
      .main-item-footer {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        .item-footer-left {
          .main-item-openTime {
            display: flex;
            align-items: center;
            // padding-bottom: 12px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 14px;
            .item-openTime-title {
            }
            .item-openTime-value {
              color: #ffffff;
            }
          }
          .main-item-payTime {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 14px;
            .item-payTime-title {
            }
            .item-payTime-value {
              color: #ffffff;
            }
          }
        }
        .item-footer-right {
          position: absolute;
          right: 20px;
          // padding-right: 20px;
          .main-item-detail {
            background: #5c5c66;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
          }
        }
      }
    }
  }
}
::v-deep(.van-tab) {
  color: #cccaca;
  padding: 3px 0 12px !important;
}
</style>
